<template>
	<div class="uploaded-loading" v-if="isLoading">
		<div class="uploaded-loading-title">上传中...</div>
		<div class="uploaded-loading-progress">
			<el-progress :percentage="uploadNumber" intermediate :show-text="false" />
		</div>
	</div>
	<!-- <el-image v-if="isImage(url)" class="uploaded-list-image" :src="url" fit="cover" key="image"></el-image> -->
	<!-- <video v-else-if="isVideo(url)" class="uploaded-list-image" :src="url" fit="cover" key="video"></video>
	<div class="uploaded-list-file" v-else>
		<v-icon size="100px" :name="iconName()" class="uploaded-list-file-logo" :alt="url" />
		<div class="uploaded-list-file-tip">
			{{ url.split("/").pop() }}
		</div>
	</div> -->
</template>

<script setup>
import { isImage, isVideo } from "/plugins/file"
import { ref } from "vue"

const props = defineProps({
	url: {
		type: String,
		default: "",
	},
	provisional: {
		type: Boolean,
		default: false,
	},
})

function iconName() {
	switch (props.url.split(".").pop()) {
		case "doc":
		case "docx":
			return "icon-word"
		case "ppt":
		case "pptx":
			return "icon-ppt"
		case "xls":
		case "xlsx":
			return "icon-excel"
		case "md":
			return "icon-markdown"
		case "txt":
			return "icon-text"
		case "pdf":
			return "icon-pdf"
		case "7z":
		case "zip":
			return "icon-zip"
		default:
			return "icon-unknown"
	}
}

const uploadNumber = ref(100)
const isLoading = computed(() => {
	if (props.provisional) {
		return true
	}
	if (uploadNumber.value < 100) {
		return true
	}
	return false
})
let timer

function createLoaing() {
	timer = setInterval(() => {
		if (!props.provisional) {
			clearInterval(timer)
			uploadNumber.value = 100
			return
		}
		if (uploadNumber.value < 100) {
			uploadNumber.value += (Math.random() * (100 - uploadNumber.value)) / 10
		} else {
			clearInterval(timer)
		}
	}, 200)
}

if (props.provisional) {
	uploadNumber.value = 0
	createLoaing()
}
</script>

<style lang="scss" scoped></style>
